<template>
    <div class="list">
        <div class="search-part">
            <div class="part1">
                <el-row :gutter="20">
                    <el-col :span="5">
                        <div class="part2">
                            <button type="button" class="circleBtn purpleBtn" :class="[getCurrentPurple]" @click="queryState3()">
                                <span>全部</span>
                            </button>
                            <button type="button" class="circleBtn redBtn" :class="[getCurrentRed]" @click="queryState0()">
                                <span>生效</span>
                            </button>
                            <button type="button" class="circleBtn yellowBtn" :class="[getCurrentYellow]" @click="queryState2()">
                                <span>完成</span>
                            </button>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="grid-content">
                            <v-simpsearch class="simple-search" @transferParam="getParam"></v-simpsearch>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div class="grid-content pdt10 btns">
                            <el-button class="red-btn" @click="add()"> 新 增 </el-button>
                            <lodop-com :getLodopInstance="showDialog" :fromPage="billType" style="padding-left:9px;display: inline-block"></lodop-com>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="list-main">
            <div id="myDIV">
                <waterfall
                :line-gap="300"
                :fixed-height="true"
                :max-line-gap="360"
                :min-line-gap="250"
                :watch="items"
                align="center"
                >
                    <!-- each component is wrapped by a waterfall slot -->
                    <waterfall-slot
                            v-for="(item, index) in items"
                            :width="265"
                            :height="250"
                            :order="index"
                            :key="item.id"
                    >
                        <v-billcomp
                                :item="item"
                                :classText="getState(item.state)"
                                :index="index"
                                :backSelectItems="selectItems"
                                class="item"
                                :backItems="getCurrentSelectItems"
                                :viewClick="function(){info(item)}"
                                :buttonText="buttonText"
                                :isMutpart="true"
                        >
                            <h6 class="sn">{{item.sn}}</h6>
                            <ul>
                                <li class="storehouse">
                                  <span class="icon2"></span><span class="text">{{item.outstorename}}</span>
                                </li>
                                <li class="storehouse">
                                  <span class="icon1"></span><span class="text">{{item.istorename}}</span>
                                </li>
                                <li class="handler-name">
                                    <span>{{item.handerName}}</span>
                                </li>
                                <li class="handler-name">
                                    <span>{{item.creatorName}}</span>
                                </li>
                                <li class="bize-date">
                                  <span>{{item.ctime}}</span>
                                </li>
                                <li class="remark">
                                  <span class="l1">{{item.remark||'暂无'}}</span>
                                </li>
                            </ul>
                        </v-billcomp>
                    </waterfall-slot>
                </waterfall>
            </div>
        </div>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                size="tiny">
            <span>选择打印样式</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="print2">票 据</el-button>
                <el-button type="primary" @click="print1">小 票</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import Waterfall from 'vue-waterfall/lib/waterfall.vue';
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
    import vBillcomp from '../../common/BillComp.vue';
    import vSimpsearch from '../SimpSearch.vue';
    import * as type from '../../../store/types';
    import lodopCom from '../../common/LodopComp.vue';
    export default {
        name: 'keepalive-false',
        components: {
             vBillcomp, Waterfall, WaterfallSlot, vSimpsearch, lodopCom
        },
        data: function () {
            return {
                billType: 'allot',
                dialogVisible: false,
                allItems: [],
                selectItems: [],
                items: [],
                rows: 20,//显示数量
                page: 1,//当前页数
                totalPage: 1,
                loading: true,
                param: '',
                buttonText: '查看',
                state: '0,1',
                top: 10,
                left: 10,
                width: 300,
                height: 20,
                contentFontSize: 10,
                LODOP: "",
                entryModel: [],
                currentUser:{},
            }
        },
        mounted: function () {
            this.currentUser = JSON.parse(localStorage.getItem("currentUser"));
            this.loadMore();
            this.$$("#content").scrollTop(0)
            console.log(this.$$("#content").scrollTop())
            let self = this;
            this.$$("#content").on('scroll', function (e) {
                var scrollTop = self.$$("#content").scrollTop();
                var innerHeight = self.$$("#content").innerHeight();
                var scrollHeight = self.$$("#content").scrollHeight();
                if (scrollTop + innerHeight >= scrollHeight) {
                    self.page++;
                    if (self.page > self.totalPage) {
                        return;
                    }
                    self.loading = true;
                    self.loadMore();
                    console.log('*(******************' + self.page)
                }
            });

            document.getElementById("myDIV").addEventListener('wheel', function (e) {
                if (e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0) {
                    console.log(e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0)
                    self.page++;
                    self.loading = true;
                    self.loadMore();
                }
            });
        },
        watch: {
            param(val){
                this.items = [];
                this.page = 1;
                this.totalPage = 1;
                this.loadMore();
            },
            state(){
                this.items = [];
                this.page = 1;
                this.totalPage = 1;
                this.loading = true;
                this.loadMore();
            }
        },
        computed: {
            getCurrentPurple: function () {
                if(this.state == '0'||this.state=='1'||this.state=='2'){
                    return  'purpleBtn'
                }else{
                    return  'purpleActiveBtn'
                }
            },
            getCurrentRed: function () {
                if(this.state == '0'){
                    return 'redActiveBtn'
                }else{
                    return 'redBtn'
                }
            },
            getCurrentYellow: function () {
                if(this.state == '1'){
                    return  'yellowActiveBtn'
                }else{
                    return  'yellowBtn'
                }
            },
        },
        methods: {
            getState: function (state) {
              if (state == 0) {
                  return {
                      'stateClass': 'effect-circle',
                      'stateText': '生效'
                  }
              } else if (state == 1) {
                  return {
                      'stateClass': 'complete-circle',
                      'stateText': '完成'
                  }
              }else {
                  return {
                      'stateClass': 'other-circle',
                      'stateText': '其他'
                  }
              }
            },
            loadMore() {
                let self = this;
                console.log(this.state)
                if (this.page <= this.totalPage) {
                    self.loading = true;
                    this.$axioxs.get("/allot_bill/?param=" + this.param + "&rows=" + this.rows + "&page=" + this.page + "&states=" + this.state)
                        .then(function (res) {
                                self.totalPage = res.data.totalPage;
                                self.allItems = res.data.records;
                                self.allItems.forEach(item => {
                                    item.height = 235;
                                    item.width = 300;
                                    self.items.push(item);
                                });
                                self.loading = false;
                            },
                            (res) => {
                                self.loading = false;
                                this.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            });
                }
            },
            getCurrentSelectItems: function (items) {
            },
            getParam(res){
                this.param = res;
                this.$$("#content").scrollTop(0)
            },
            info: function (item) {
                let hasRights = this.currentUser.rights.find(obj=> obj === 'allot_edit')
                if(hasRights != 'allot_edit'){
                    this.$message({
                        showClose: true,
                        message: '权限不足',
                        type: 'warning'
                    });
                return;
                }
                this.$store.commit(type.CHANGE_INDEX, '/allotBillInfo');
                this.$router.push({
                    name: 'allot',
                    path: '/allotBillInfo',
                    params: {
                        item: item,
                    }
                });
            },
            add:function () {
                let hasRights = this.currentUser.rights.find(obj=> obj === 'allot_add')
                if(hasRights != 'allot_add'){
                    this.$message({
                        showClose: true,
                        message: '权限不足',
                        type: 'warning'
                    });
                    return;
                }
                this.$store.commit(type.CHANGE_INDEX, '/allotBillInfo');
                this.$router.push({
                    name: 'allot',
                    path: '/allotBillInfo',
                    params: {
                        new: 'new'
                    }
                });
            },
            queryState0: function () {
                this.state = 0;
            },
            queryState2: function () {
                this.state = 1;
            },
            queryState3: function () {
                this.state = '0,1';

            },
            showDialog:function(lodopInstance){
              let hasRights = this.currentUser.rights.find(obj=> obj === 'allot_print')
              if(hasRights != 'allot_print'){
                this.dialogVisible = false;
                return;
              }
              if (this.selectItems.length != 1){
                  this.$message.error("请选择一条单据");
                  return;
              }else{
                  this.dialogVisible = true;
                  this.LODOP = lodopInstance;
              }

            },
            print1: function () {
                //打印
                console.log("打印-----")
                let self = this;
                if(this.LODOP!=undefined){
                    this.top = 0;
                    this.left = 5;
                    this.width = 180;
                    this.height = 15;
                    this.contentFontSize = 7;
                    let a = self.selectItems[0];
                    this.readEntryModel(a,1);
                    this.$on("allot_data_small",this.printSmall);
                    this.dialogVisible = false;
                }else{
                    console.log("无云打印实例")
                    this.dialogVisible = false;
                }
            },
            print2: function () {
                //打印
                if(this.LODOP!=undefined){
                    let self = this;
                    this.top = 10;
                    this.left = 10;
                    this.width = 720;
                    this.height = 25;
                    this.contentFontSize = 15;
                    let a = self.selectItems[0];
                    this.readEntryModel(a,2);
                    this.$on("allot_data_big",this.printBig);
                    this.dialogVisible = false;
                }else{
                    console.log("无云打印实例")
                    this.dialogVisible = false;
                }
            },
            readEntryModel: function (a,type) {
                console.log("获取分录");
                let self = this;
                this.$axioxs.get("/allot_bill/entry/list/" + a.id).then(
                    function (res) {
                        self.entryModel = res.data;
                        console.log(self.entryModel);
                        if (type == 1){
                            self.$emit("allot_data_small");
                        }else {
                            self.$emit("allot_data_big");
                        }
                    }
                ).catch(
                    function (error) {
                        console.log(error);
                    }
                );
            },
            printSmall: function () {
                console.log("小票打印");
                var self = this;
                var a = this.selectItems[0];
                this.LODOP.SET_PRINT_MODE("POS_BASEON_PAPER",true);
                this.LODOP.PRINT_INIT("");
                //标题
                this.LODOP.SET_PRINT_STYLE("Alignment",2);
                this.LODOP.SET_PRINT_STYLE("FontSize",this.contentFontSize);
                this.LODOP.ADD_PRINT_TEXT(this.top,this.left,this.width,this.height,"调拨单");
                this.LODOP.SET_PRINT_STYLEA(1,"Bold",1);
                this.LODOP.SET_PRINT_STYLE("Alignment",1);
                //头部
                this.LODOP.ADD_PRINT_TEXT(this.top=this.top+this.height,this.left,this.width,this.height,"单据编号：" + a.sn );
                this.LODOP.ADD_PRINT_TEXT(this.top=this.top+this.height,this.left,this.width,this.height,"创建日期：" + a.ctime);
                this.LODOP.ADD_PRINT_TEXT(this.top=this.top+this.height,this.left,this.width,this.height,"发货仓库："+ a.outstorename);
                this.LODOP.ADD_PRINT_TEXT(this.top=this.top+this.height,this.left,this.width,this.height,"收获仓库："+ a.istorename );
                this.LODOP.ADD_PRINT_TEXT(this.top=this.top+this.height,this.left,this.width,this.height,"经手人："+ a.handername );
                //内容
                this.top+=this.height;
                this.LODOP.SET_PRINT_STYLE("Alignment",2);
                this.LODOP.ADD_PRINT_LINE(this.top-5,this.left,this.top-5,this.width+this.left,0,1);  //打印表格横向线
                this.LODOP.ADD_PRINT_TEXT(this.top,this.left,this.width/4,this.height*2,"序号");
                this.LODOP.ADD_PRINT_TEXT(this.top,this.left+this.width/4,this.width/4,this.height*2,"名称");
                this.LODOP.ADD_PRINT_TEXT(this.top,this.left+this.width/4*2,this.width/4,this.height*2,"数量");
                this.LODOP.ADD_PRINT_TEXT(this.top,this.left+this.width/4*3,this.width/4,this.height*2,"商品备注");

                var iCurLine = this.top+this.height*2;
                var n = 1;
                self.entryModel.forEach(entry => {
//                    this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left,iCurLine-5,this.width+this.left,0,1);  //打印表格横向线
                    this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left,this.width/4,this.height+20,n);
                    this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+this.width/4,this.width/4,this.height*2,entry.goodsName);
                    this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+this.width/4*2,this.width/4,this.height*2,entry.quantity + "" + entry.goodsUnit);
                    this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+this.width/4*3,this.width/4,this.height*2,entry.goodsRemark);
                    iCurLine=iCurLine+this.height*2;
                    n++;
                });
                //底部
                this.LODOP.SET_PRINT_STYLE("Alignment",1);
                this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+5,this.width/2,this.height*2,"制单人：" + a.creator_name);
                this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+5+this.width/2,this.width/2,this.height*2,"打印日期：" + (new Date()).toLocaleDateString()+" "+(new Date()).toLocaleTimeString());
                this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left,iCurLine-5,this.width+this.left,0,1);  //打印表格横向线

                iCurLine=iCurLine+this.height*2;
                this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+5,this.width,this.height*2,"备注：" + a.remark);
                this.LODOP.SET_PRINT_PAGESIZE(3,this.width*5,this.height,"");
//                this.LODOP.PREVIEW();
                this.LODOP.PRINT();
                this.LODOP = "";
            },
            printBig: function () {
                let self = this;
                var a = self.selectItems[0];

                this.LODOP.SET_PRINT_MODE("POS_BASEON_PAPER",true);

                this.LODOP.PRINT_INIT("");

                this.printHeader(a);

                var iCurLine = this.top+this.height*1.5;
                console.log(this.top + "----" + this.left + "----" + this.width + "----" + this.height);
                var n = 1;
                self.entryModel.forEach(entry => {
                    if (n!=1 && (n-1)%10==0){
                        this.printfooter(iCurLine,a);
                        this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left,iCurLine-5,this.width+this.left,0,1);  //打印表格横向线
                        this.LODOP.NewPageA();
                        this.top=10;
                        this.printHeader(a);
                        iCurLine = this.top+this.height*1.5;
                    }
                    this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left,iCurLine-5,this.width+this.left,0,1);  //打印表格横向线
                    this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left,iCurLine+this.height*1.5-5,this.left,0,1);  //打印表格竖线
                    this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left,this.width/4-130,this.height+20,n);
                    this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left+this.width/4-130,iCurLine+this.height*1.5-5,this.left+this.width/4-130,0,1);  //打印表格竖线
                    this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+this.width/4-130,this.width/4+130,this.height*1.5,entry.goodsName);
                    this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left+this.width/4*2,iCurLine+this.height*1.5-5,this.left+this.width/4*2,0,1);  //打印表格竖线
                    this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+this.width/4*2,this.width/4,this.height*1.5,entry.quantity + "" + entry.goodsUnit);
                    this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left+this.width/4*3,iCurLine+this.height*1.5-5,this.left+this.width/4*3,0,1);  //打印表格竖线
                    this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+this.width/4*3,this.width/4,this.height*1.5,entry.goodsRemark);
                    this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left+this.width,iCurLine+this.height*1.5-5,this.left+this.width,0,1);  //打印表格竖线
                    // LODOP.ADD_PRINT_LINE(iCurLine-5,width+left+5,iCurLine+height*2-5,width+left+5,0,1);  //打印表格竖线
                    iCurLine=iCurLine+this.height*1.5;
                    n++;
                });

                n--;
                if ( n%11!=0){
                    for (let i = 0; i < 10-n%10; i++){
                        this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left,iCurLine-5,this.width+this.left,0,1);  //打印表格横向线
                        this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left,iCurLine+this.height*1.5-5,this.left,0,1);  //打印表格竖线
                        this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left,this.width/4-130,this.height+20,n+1+i);
                        this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left+this.width/4-130,iCurLine+this.height*1.5-5,this.left+this.width/4-130,0,1);  //打印表格竖线
                        this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+this.width/4-130,this.width/4+130,this.height*1.5,"");
                        this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left+this.width/4*2,iCurLine+this.height*1.5-5,this.left+this.width/4*2,0,1);  //打印表格竖线
                        this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+this.width/4*2,this.width/4,this.height*1.5,"");
                        this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left+this.width/4*3,iCurLine+this.height*1.5-5,this.left+this.width/4*3,0,1);  //打印表格竖线
                        this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+this.width/4*3,this.width/4,this.height*1.5,"");
                        this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left+this.width,iCurLine+this.height*1.5-5,this.left+this.width,0,1);  //打印表格竖线
                        iCurLine=iCurLine+this.height*1.5;
                    }
                }

                this.printfooter(iCurLine,a);
//                this.LODOP.PREVIEW();
                this.LODOP.PRINT();
                this.LODOP = "";
            },
            printHeader: function (a) {
                this.LODOP.SET_PRINT_STYLE("Alignment",2);
                this.LODOP.SET_PRINT_STYLE("FontSize",this.contentFontSize);
                this.LODOP.ADD_PRINT_TEXT(this.top,this.left,this.width,this.height,"调拨单");
                this.LODOP.SET_PRINT_STYLEA(1,"Bold",1);
                this.top=this.top+this.height;

                this.LODOP.SET_PRINT_STYLE("Alignment",1);
                this.LODOP.ADD_PRINT_TEXT(this.top,this.left,this.width/3,this.height,"单据编号：" + a.sn );
//                this.LODOP.ADD_PRINT_TEXT(this.top,this.left,this.width,this.height,"发货仓库：" + a.outstorename);
//                this.LODOP.ADD_PRINT_TEXT(this.top,this.left+this.width/2,this.width/2,this.height,"收获仓库：" + a.istorename);
                this.LODOP.SET_PRINT_STYLE("Alignment",2);
                this.LODOP.ADD_PRINT_TEXT(this.top,this.left+this.width/3,this.width/3,this.height,a.ctime );
                this.LODOP.SET_PRINT_STYLE("Alignment",3);
                this.LODOP.ADD_PRINT_TEXT(this.top,this.left+this.width/3*2,this.width/3,this.height,"业务类型:调拨" );

                this.top+=this.height;
                this.LODOP.SET_PRINT_STYLE("Alignment",2);
                this.LODOP.ADD_PRINT_LINE(this.top-5,this.left,this.top-5,this.width+this.left,0,1);  //打印表格横向线
                // LODOP.ADD_PRINT_LINE(top-5,left-5,top+height*2-5,left-5,0,1);  //打印表格竖线
                this.LODOP.ADD_PRINT_LINE(this.top-5,this.left,this.top+this.height*1.5-5,this.left,0,1);  //打印表格竖线
                this.LODOP.ADD_PRINT_TEXT(this.top,this.left,this.width/4-130,this.height*1.5,"#");
                this.LODOP.ADD_PRINT_LINE(this.top-5,this.left+this.width/4-130,this.top+this.height*1.5-5,this.left+this.width/4-130,0,1);  //打印表格竖线
                this.LODOP.ADD_PRINT_TEXT(this.top,this.left+this.width/4-130,this.width/4+130,this.height*1.5,"名称");
                this.LODOP.ADD_PRINT_LINE(this.top-5,this.left+this.width/4*2,this.top+this.height*1.5-5,this.left+this.width/4*2,0,1);  //打印表格竖线
                this.LODOP.ADD_PRINT_TEXT(this.top,this.left+this.width/4*2,this.width/4,this.height*1.5,"数量");
                this.LODOP.ADD_PRINT_LINE(this.top-5,this.left+this.width/4*3,this.top+this.height*1.5-5,this.left+this.width/4*3,0,1);  //打印表格竖线
                this.LODOP.ADD_PRINT_TEXT(this.top,this.left+this.width/4*3,this.width/4,this.height*1.5,"商品备注");
                this.LODOP.ADD_PRINT_LINE(this.top-5,this.left+this.width,this.top+this.height*1.5-5,this.left+this.width,0,1);  //打印表格竖线
                // LODOP.ADD_PRINT_LINE(top-5,width+left+5,top+height*2-5,width+left+5,0,1);  //打印表格竖线
            },
            printfooter(iCurLine,a){
                this.LODOP.SET_PRINT_STYLE("Alignment",1);
                // LODOP.ADD_PRINT_LINE(iCurLine-5,left-5,iCurLine+height*2-5,left-5,0,1);  //打印表格竖线
                this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left,iCurLine+this.height*1.5-5,this.left,0,1);  //打印表格竖线
                this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+5,this.width,this.height*1.5-5,"备注：" + a.remark);
                this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left+this.width,iCurLine+this.height*1.5-5,this.left+this.width,0,1);  //打印表格竖线
                this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left,iCurLine-5,this.width+this.left,0,1);  //打印表格横向线

                iCurLine=iCurLine+this.height*1.5;
                this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+5,this.width/2,this.height,"制单人：" + a.creator_name);
                this.LODOP.ADD_PRINT_TEXT(iCurLine,this.left+5+this.width/2,this.width/2,this.height,"经手人：" + (a.handername==undefined||a.handername==""?"无":a.handername));
                this.LODOP.ADD_PRINT_LINE(iCurLine-5,this.left,iCurLine-5,this.width+this.left,0,1);  //打印表格横向线
            }
        },

    }

</script>

<style scoped>
    .item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }

    #myDIV {
        padding-top: 80px;
    }

    .simple-search .el-input__inner {
        border-radius: 20px;
    }

    .search-part {
        width: 100%;
    }

    .search-layout {
        padding: 10px;
        background-color: #fff;
    }

    .part1 {
        padding-bottom: 5px;
        border-bottom: 1px solid #cacaca;
    }

    .part2 {
        padding: 10px 0px 0px 20px;
    }

    .l1 {
        text-indent: initial;
        margin-top: -20px;
    }

    ul li{
      position: relative;
    }

    .text{
      padding-left: 20px;
    }

    .icon2{
      position: absolute;
      display: inline-block;
      width: 30px;
      height: 26px;
      background: url(../../../../static/img/icon2.png) no-repeat left 0;
      background-size: 50%;
      top: 3px;

    }
    .icon1{
      position: absolute;
      display: inline-block;
      width: 30px;
      height: 26px;
      background: url(../../../../static/img/icon1.png) no-repeat left 0;
      background-size: 50%;
      top: 10px;
    }
    #myDIV{
        margin: 0 20px;
    }
</style>
